<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header"><span>活动详情</span></div>
      <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="活动名称" prop="name">{{ form.name }}</el-form-item>
        <el-form-item label="副标题" prop="explain">{{ form.explain }}</el-form-item>
        <el-form-item label="活动状态" prop="explain">
          <el-tag v-if="form['activity_status']===0" type="danger">{{ form.statusText }}</el-tag>
          <el-tag v-if="form['activity_status']===1" type="primary">{{ form.statusText }}</el-tag>
          <el-tag v-if="form['activity_status']===2" type="warning">{{ form.statusText }}</el-tag>
          <el-tag v-if="form['activity_status']===3" type="success">{{ form.statusText }}</el-tag>
          <el-tag v-if="form['activity_status']===4" type="info">{{ form.statusText }}</el-tag>
        </el-form-item>
        <el-form-item label="活动地点" prop="place">{{ form.place }}</el-form-item>
        <el-form-item label="活动时间" prop="date">{{ form.start_time }} 至 {{ form.end_time }}</el-form-item>
        <el-form-item label="报名截止" prop="stop_time">{{ form['stop_time'] }}</el-form-item>
        <el-form-item label="主办方" prop="host_party">{{ form['host_party'] }}</el-form-item>
        <el-form-item label="联系方式" prop="host_contact">{{ form['host_contact'] }}</el-form-item>
        <el-form-item label="活动图片" prop="picture">
          <el-image :src="form['picture']" :preview-src-list="[form['picture']]" style="width: 188px;height: 100px;"/>
        </el-form-item>
        <el-form-item label="活动须知" prop="regulations">{{ form['regulations'] }}</el-form-item>
        <el-form-item label="活动详情"><div v-html="form['details']">{{ form['details'] }}</div></el-form-item>
        <el-form-item label="人数限制" prop="limit_number">{{ form['limit_number'] }}</el-form-item>
        <el-form-item label="活动类型" prop="activity_type_id">{{ form['activity_type_name'] }}</el-form-item>
        <el-form-item label="审核方式" prop="audit_mode">
          <div v-if="form['audit_mode']===0">手动通过</div>
          <div v-if="form['audit_mode']===1">自动审核</div>
        </el-form-item>
        <el-form-item label="通知方式" prop="notice">
          <div v-if="form['notice']===1">微信</div>
          <div v-if="form['notice']===2">短信</div>
          <div v-if="form['notice']===3">微信&短信</div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ImageUrl: this.$store.getters.serverUrl,
ImageUrl: '',

      title: '创建活动',

      dialogImageUrl: '',
      showImageDialog: false,

      typeList: [], // 活动类型列表

      form: {
        date: [],
        stop_time: ''
      },
      formRules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        explain: [{ required: true, message: '请输入活动简介', trigger: 'blur' }],
        place: [{ required: true, message: '请输入活动地点', trigger: 'blur' }],
        date: [{ required: true, message: '请选择活动时间', trigger: 'blur' }],
        stop_time: [{ required: true, message: '请选择报名截止时间', trigger: 'blur' }],
        host_party: [{ required: true, message: '请输入主办方', trigger: 'blur' }],
        host_contact: [{ required: true, message: '请输入主办方电话', trigger: 'blur' }],
        picture: [{ required: true, message: '请输入活动封面图', trigger: 'blur' }],
        regulations: [{ required: true, message: '请输入活动规则', trigger: 'blur' }],
        details: [{ required: true, message: '请输入活动详情', trigger: 'blur' }],
        limit_number: [{ required: true, message: '请输入活动人数', trigger: 'blur' }],
        activity_type_id: [{ required: true, message: '请选择活动类型id', trigger: 'blur' }],
        audit_mode: [{ required: true, message: '请选择审核方式', trigger: 'blur' }],
        notice: [{ required: true, message: '请选择通知方式', trigger: 'blur' }]
      }
    }
  },
  watch: {
  },
  created() {
    this.getTypeList()
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
    }
  },
  methods: {
    /**
     *  获取活动类型列表
     */
    getTypeList() {
      const url = 'activity/getTypeList'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.typeList = res.data
        if (this.form['id']) {
          this.loadData()
        }
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    /**
     *  获取信息
     *  接口:'member/detail/{id}'
     */
    loadData() {
      const url = 'activity/getActivityInfo/' + this.form['id']
      this.$store.dispatch('GetConnect', { url }).then(res => {
        Object.assign(this.form, res.data)
        this.form['date'] = [res.data['start_time'], res.data['end_time']]
        // console.log(this.form)
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const url = 'activity/addActivity'
          const data = Object.assign({}, this.form)
          data['date'] && data['date'].length !== 0 && (data['start_time'] = data['date'][0], data['end_time'] = data['date'][0])
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.$router.back(-1)
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';
  .box-1 {
    max-width: 1000px;
    margin: 0 auto;
    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }
    .el-form {
      max-width: 900px;
      .title {
        font-weight: 600;
      }
      .remark {
        font-size: 13px;
        color: $textGray;
      }
      .el-button {
        @extend .bg-green;
        width: 20%;
        min-width: 160px;
      }
    }
  }
  .el-checkbox {
    margin-right: 30px;
  }
  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
</style>
